<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <div class="search-item">
          <el-date-picker
            v-model="queryParams.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="changeOption"
          >
          </el-date-picker>
        </div>

        <div class="search-item">
          <el-radio
            class="mgb10 mgt20"
            v-for="(item, index) in accountList"
            :key="index"
            :label="item.id"
            v-model="queryParams.accountId"
            @change="changeOption();"
            style="color: #0099ff;"
          >
            {{ item.accountName }}
          </el-radio>
        </div>

      </div>
      <div class="right">
        <el-button size="small" :type="queryParams.isShowAllDate === 1 ? 'primary' : ''" @click="saveIsShowAllDate()">显示所有日期</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        v-loading="loading"
        :data="data"
        border
        v-tableHeight="{bottomOffset: 80}"
        height="100px"
        ref="tableData"
      >
        <el-table-column
          prop="createTime"
          :label="'日期'"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="imgNum"
          :label="'图片数量'"
          align="center"
          min-width="100"
        >
          <template slot-scope="{row}">
            <template v-if="row.imgNum > 0">
              <span style="cursor: pointer;" @click="previewImages(row.imageArr)">{{ row.imgNum }}</span>
            </template>
            <template v-else>
              <span style="color: #0099ff;">未上传</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="'操作'"
          align="center"
          min-width="100"
        >
          <template slot-scope="{row}">
            <template v-if="row.imgNum > 0">
              <span style="cursor: pointer;" @click="downloadSheinImgZip(row)">下载图片</span>
            </template>
          </template>
        </el-table-column>

      </el-table>
      <span style="color: red; font-size: 14px;">所有的图片仅会保存60天时间，60天后对应图片与记录将被清除</span>
      <div class="page-wrap">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
          :page-sizes="[10, 20, 50, 100, 500, 1000]"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 图片预览组件 -->
    <el-dialog :visible.sync="previewDialogVisible">
      <div style="display: flex; justify-content: center; align-items: center; height: 500px;">
        <el-carousel :interval="0" style="width: 80%; max-width: 800px;">
          <el-carousel-item v-for="(img, index) in previewImagesArr" :key="index">
            <img :src="img" style="max-width: 100%; max-height: 100%; display: block; margin: 0 auto;" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {downloadSheinImgZip, getSiAccountImageList} from "@/api/order";
export default {
  name: "sheinImgList",
  data(){
    return {
      loading: false,
      queryParams: {
        page: 1,
        pageSize: 20,
        date: [],
        accountId: '',
        isShowAllDate: 0,
      },
      data:[],
      date:[],
      total: 0,
      accountList: [],
      selectNum: 0,
      pickerOptions: {
        disabledDate(time) {
          // 获取当前日期
          const currentTime = new Date();
          // 获取 60 天之前的日期
          const thirtyDaysAgo = new Date();
          thirtyDaysAgo.setDate(currentTime.getDate() - 60);

          // 如果 time 在 60 天之前，则禁用
          return time.getTime() < thirtyDaysAgo.getTime();
        }
      },

      previewDialogVisible: false,
      previewImagesArr: [] // 用于存放预览的图片数组
    }
  },
  created() {
    this.getData();
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods:{
    getData() {
      this.loading = true
      if (this.queryParams.date && this.queryParams.date.length === 2) {
        const startDate = new Date(this.queryParams.date[0]);
        const endDate = new Date(this.queryParams.date[1]);
        this.queryParams.date = [
          this.formatDate(startDate),
          this.formatDate(endDate)
        ];
      }
      getSiAccountImageList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.total = res.info.total
          this.accountList = res.info.accountList
          if (this.selectNum <= 0 && this.accountList.length > 0) {
            this.queryParams.accountId = this.accountList[0].id
            this.getData()
          }
          this.selectNum++
        })
    },
    // 触发变更事件
    changeOption(is_search = false, type = ''){
      if (is_search == true) {
        //判断是否使用过搜索按钮
        this.is_search = true
      }
      if (type == 'clear') {
        if (this.is_search == false) {
          return
        } else {
          this.is_search = false
        }
      }

      this.queryParams.page = 1
      this.getData()
    },
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.page = 1
      this.getData();
    },

    saveIsShowAllDate() {
      if (this.queryParams.isShowAllDate === 1) {
        this.queryParams.isShowAllDate = 0
      } else {
        this.queryParams.isShowAllDate = 1
      }
      this.changeOption()
    },

    // 格式化日期函数
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      // 返回格式化后的日期字符串，例如：YYYY-MM-DD
      return `${year}-${month}-${day}`;
    },

    previewImages(imgArr) {
      // 将图片数组存放到预览图片数组中
      this.previewImagesArr = imgArr;
      // 打开图片预览对话框
      this.previewDialogVisible = true;
    },

    downloadSheinImgZip(row) {
      downloadSheinImgZip({id: row.id})
        .then(res=>{
          const url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/zip'}));
          // 使用 window.open 方法打开新窗口并下载文件
          window.open(url);
          // 释放 URL 对象
          window.URL.revokeObjectURL(url);
        })
    },
  },
}
</script>

<style scoped lang="less">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }

}
</style>
